<template>
    <view class="container">
        <uv-sticky :offset-top="offsetTop">
            <view class="shenheHeader flex flex-align">
                <view @click="changeTab(0)" :class="status==0?'flex-1 active':'flex-1'"> 全部 </view>
                <view @click="changeTab(1)" :class="status==1?'flex-1 active':'flex-1'"> 待审核 </view>
                <view @click="changeTab(2)" :class="status==2?'flex-1 active':'flex-1'"> 已退款 </view>
                <view @click="changeTab(3)" :class="status==3?'flex-1 active':'flex-1'"> 退款失败 </view>
            </view>
        </uv-sticky>
        <view style="padding: 30rpx;">
            <view v-if="list.length>0" class="list" v-for="(item,index) in list" :key="index">
            <view class="liveLogItemTop flex flex-center flex-align">
                <view class="liveLogItemLeft">
                    <view class="liveLogItemLeftTitle">退款金额</view>
                    <view class="price flex flex-align">
                        <view class="liveLogItemLeftPrice"><span>¥</span> {{ item.price }}</view>
                        <view class="status bg-blue" >{{item.status_name}}</view>
                    </view>
                </view>
            </view>
            <view class="liveLogItemRight">
                <view class="liveLogItemRightInfo flex flex-bt flex-align">
                    <view class="liveLogItemRightInfoName">订单号</view>
                    <view class="liveLogItemRightInfoID">{{ item.out_detail_no }}</view>
                </view>
                <view class="liveLogItemRightInfo flex flex-bt flex-align">
                    <view class="liveLogItemRightInfoName">申请时间</view>
                    <view class="liveLogItemRightInfoID">{{ item.created_at }}</view>
                </view>
                <view v-if="item.handle_time" class="liveLogItemRightInfo flex flex-bt flex-align">
                    <view class="liveLogItemRightInfoName">审核时间</view>
                    <view class="liveLogItemRightInfoID">{{ item.handle_time||'无' }}</view>
                </view>
                <view v-if="item.fail_reason" class="liveLogItemRightInfo flex flex-bt flex-align">
                    <view class="liveLogItemRightInfoName">失败原因</view>
                    <view class="liveLogItemRightInfoID">{{ item.fail_reason||'无' }}</view>
                </view>
            </view>
        </view>
        <view v-else class="noData" style="padding-top: 10vh;">
            <image src="/static/nodata/nodata02.png" />
            <view class="noDataText">暂无数据</view>
        </view>

        </view>
        
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useInfiniteLoad } from '@/hooks/useInfiniteScroll';
import API_CENTER from '@/api/teamcenter';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
const status = ref(0)
const offsetTop = ref<Number>(0)
// 条件编译
// #ifdef H5
offsetTop.value = -44
// #endif
// #ifdef MP-WEIXIN
offsetTop.value = 0
// #endif
onLoad(() => {
    params.status = Number(status.value)
    loadMore()
})
const { list, isLoading, hasMore, loadMore,reset, params } = useInfiniteLoad(API_CENTER.getRefundList, {
    initialParams: {},
    transformResponse: (response) => {
        return response.list || [];
    }
});
const changeTab = (index: number) => {
    status.value = index
    params.status = Number(status.value)
    reset()
    loadMore()
}
onReachBottom(() => {
    // 还有更多数据且不在加载中时，加载更多
    if (hasMore.value && !isLoading.value) {
        loadMore()
    }
})
</script>
<style scoped lang="scss">
    .container {
        .shenheHeader {
            background-color: #fff;
            view {
                font-size: 28rpx;
                font-weight: bold;
                padding: 20rpx 0;
                margin: 0 20rpx;color: #969799;
                text-align: center;
                border-bottom: 6rpx solid #fff;
            }
            view.active {
                color: #007AFF;
                border-bottom: 6rpx solid #007AFF;
            }
        }
        .list {
            background: #fff;
            padding:30rpx 20rpx;
            border-radius: 20rpx;
            margin-bottom: 20rpx;
            .liveLogItemTop {
                .liveLogItemLeftTitle {
                    font-size: 28rpx;margin-bottom: 8rpx;
                    color: #333;text-align: center;
                }
                .liveLogItemLeftPrice {
                    font-size: 38rpx;
                    color: #3C7CFF;font-weight: bold;
                    span{font-size: 24rpx;}
                }
                .status{padding: 5rpx 20rpx;border-radius: 30rpx;font-size: 20rpx;margin-left: 20rpx;}
            }
            .liveLogRight{color: #fff;font-size: 20rpx;padding: 10rpx 20rpx;border-radius:  30rpx 0 0 30rpx;margin-right: -20rpx;}
            .liveLogItemRight {
                background: #F5F6FA;padding:10rpx 30rpx;margin-top: 20rpx;border-radius: 20rpx;
            }
            .liveLogItemRightInfo {
                font-size: 24rpx;height: 60rpx;
                .liveLogItemRightInfoName{color: #313131;font-weight: bold;}
                .liveLogItemRightInfoID{color: #646566;}
            }
        }
    }
</style>
